<template>
	<view class="customer">
		<view class="cusImg">
			<u--image :src="avatar"  width="100" height="100">
			</u--image>
		</view>
		<view class="subInfo">
			<view class="addpro">
				<!-- <u-button class="custom-style" text="手机号登录"
					customStyle="background: linear-gradient(90deg, #2CB9A4 0%, #2CB9A4 100%);color:#fff;margin-top:20px;border-radius: 30px;"
					@click="goAuth">
				</u-button> -->
			</view>
			<view class="addpro">
				<u-button class="custom-style" text="微信授权登录"
					customStyle="background: linear-gradient(90deg, #2CB9A4 0%, #2CB9A4 100%);color:#fff;margin-top:20px;border-radius: 30px;"
					@click="goAuth">
				</u-button>
			</view>
		</view>
		<view class="other-list">
			<view class="left">
				<radio-group activeColor="#2CB9A4">
					<label v-for="(item, index) in List" :key="index">
						<radio :class="active == index ? 'checked' : ''" :checked="active== index" :value="index"
							@click="radioChange1(index)" activeColor="#2CB9A4" />
					</label>
				</radio-group>
			</view>
			<view class="right">
				同意<text style="color: #2CB9A4;" @click="goPro">《项目隐私协议》</text>
			</view>
		</view>
		<wxLoginPopup :isVisible="showPop" @update="close" :mobile="mobile" :openid="openid"/>
	</view>
</template>
<script>
	import wxLoginPopup from '@/pages/my/wx-login-popup.vue';
	import eventBUs from '../../utils/eventBus.js'
	import vvSelect from '@/components/vv-select/vv-select.vue'
	import {
		fillName,getUser
	} from '@/request/api.js'
	export default {
		components: {
			vvSelect,
			wxLoginPopup
		},
		data() {
			return {
				avatar: '/static/images/login/logo.png',
				sel: true,
				active: 0, // 选中协议与否
				formData: {
					name: '',
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}
				},
				userInfo: {},
				active: 0, // 选中协议与否
				List: [{
					name: '协议'
				}],
				showPop:false,
				mobile:''
			};
		},
		methods: {
			goPro() {
				uni.navigateTo({
					url: `/pages/login/proDetails`
				})
			},
			close() {
				this.showPop = false
				// console.log('close');
			},
			radioChange1(index) {
				if (this.active == index) { // 如果已经选中，则取消选中
					this.active = null;
				} else { // 否则进行选中赋值
					this.active = index;
				}
			},
			async getUserInfo(){
				let res =await getUser()
				uni.setStorageSync('userInfo',res.data)
				this.$eventBus.$emit('hasLogin', true);
				// console.log(res)
			},
			pickerChange(e, name) {
				// console.log(e,name)
				this.formData.ibec_id = e.toString()
				this.$refs.form1.validateField('ibec_id')
			},
			lxChange(item) {
				this.formData.type_data = item
			},
			goAuth() {
				this.showPop = true
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			// let userInfo = uni.getStorageSync('userInfo1')
			// this.avatar = userInfo.avatar
			// this.$nextTick(() => {
			// 	// 在此处执行你要执行的函数
			// 	this.$refs.form1.setRules(this.rules)
			// });
		},
	};
</script>
<style>
	radio-group text {
		font-size: 26rpx;
	}

	radio .wx-radio-input {
		border-radius: 50%;
		/* 圆角 */
		width: 34rpx;
		border: 1rpx solid #f2f2f2;
		height: 34rpx;
	}

	radio .wx-radio-input.wx-radio-input-checked {
		border: none;
		background: #2CB9A4;
	}

	radio .wx-radio-input.wx-radio-input-checked::before {
		border-radius: 50%;
		/* 圆角 */
		width: 32rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		height: 32rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		line-height: 30rpx;
		text-align: center;
		font-size: 26rpx;
		/* 对勾大小 30rpx */
		color: #fff;
		/* 对勾颜色 白色 */
		background: #2CB9A4;
		/* transform: translate(-50%, -50%) scale(1); */
	}
</style>
<style lang="scss" scoped>
	.other-list {
		display: flex;
		align-items: center;
		// border-top: 1px solid #E2E2E2;
		padding: 20rpx 30rpx;
		color: #505050;
	
		.left {}
	
		.right {
			display: flex;
			align-items: center;
			width: 80%;
			color: #BDBDBD;
			.myAddress {
				display: flex;
				flex-direction: column;
				width: 100%;
	
				.cityAddres {
					display: flex;
	
					.top {
						flex: 1;
					}
	
					.city {
						width: 48px;
						display: flex;
					}
				}
	
				.address {}
			}
		}
	}
	::v-deep .u-form-item__body__right {
		margin-top: 25rpx !important;
	}

	::v-deep .u-radio {
		margin-right: 13rpx;
	}

	::v-deep .u-form-item__body__right__message {
		margin-left: 0 !important;
	}

	::v-deep .u-form-item__body__right__content__slot {
		z-index: 100 !important;
	}

	::v-deep .u-textarea__count {
		background-color: transparent !important;
	}

	::v-deep .u-textarea {
		background-color: transparent !important;
		color: #505050;
	}

	::v-deep .vv-input__control {
		color: #505050;
		font-size: 30rpx !important;
	}

	.popupShow {
		overflow: hidden;
		position: fixed;
		z-index: 999999999999;
	}

	::v-deep .u-transition {
		overflow: scroll;
		max-height: 70vh;
	}

	::v-deep .u-radio__text {
		font-size: 30rpx !important;
		color: #505050;
	}

	::v-deep .u-radio-group--row {
		z-index: 10;
		color: #505050;
	}

	::v-deep .u-input {
		background-color: transparent !important;
	}

	::v-deep .u-form-item__body__left__content__label {
		font-size: 30rpx !important;
		color: #979797 !important;
	}

	::v-deep .u-input__content__field-wrapper__field {
		font-size: 30rpx !important;
		color: #505050;
	}

	::v-deep .u-textarea__field {
		font-size: 30rpx !important;
		color: #505050;
	}

	.customer {
		margin: 20rpx;

		.title {
			background: rgba(0, 213, 206, 0.15);
			height: 45px;
			line-height: 45px;
			display: flex;
			align-items: center;
			font-weight: 600;

			.leftIndex {
				width: 4rpx;
				height: 34rpx;
				background: #00D5CE;
				margin: 0 15rpx;
			}

			.Info {}
		}

		.compony {
			display: flex;
			border: .5px solid #dadbde;
			padding-top: 6px;
			padding-bottom: 6px;
			padding-left: 9px;
			padding-right: 9px;
			height: 24px;
			border-radius: 4px;
			justify-content: space-between;

			.select {
				flex: 1;
			}
		}

		.subInfo {
			padding: 20rpx;
		}

		.cusImg {
			display: flex;
			justify-content: center;
			margin-top: 40%;
		}
	}
</style>
